<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>前端圈 - 路虽远，无所畏</title>
    <link rel="stylesheet" type="text/css" href="/public/bootstrap-theme.min.css" />
    <link rel="stylesheet" type="text/css" href="/public/bootstrap.min.css" />
    <script src="/public/js/jquery-3.2.1.min.js"></script>
    <script src="/public/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="public/main.css" />
    <script src="public/js/index.js"></script>
</head>
<body>
<div style="width: 100%; height: 100%" >
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                {% if category == '' %}
                <a class="navbar-brand focus" href="/">首页</a>
                {% else %}
                <a class="navbar-brand " href="/">首页</a>
                {% endif %}
            </div>
            <div>
                <ul class="nav navbar-nav">
                    {% for cate in categories %}
                    <li>
                        {% if category == cate.id %}
                        <a href="/?category={{cate.id}}" class="focus">{{cate.name}}</a>
                        {% else %}
                        <a href="/?category={{cate.id}}">{{cate.name}}</a>
                        {% endif %}
                    </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </nav>
    <div class="wrap">
        <div class="fl">
            {% block content%}{% endblock %}
        </div>
        <div class="fr">
            {% if userinfo.id %}
            <div id="userInfo" class="userForm">
                <div>用户信息</div>
                <ul>
                    <li class="username">用户名: {{userinfo.username}}</li>
                    {% if userinfo.isAdmin %}
                    <li class="info">你好，管理员 <a target="_blank" href="./admin">进入后台管理系统</a></li>
                    {% else %}
                    <li class="info">欢迎登录</li>
                    {% endif %}
                    <li id="logout"><a href="javascript:void(0)" >退出</a></li>
                </ul>
            </div>

            {% else %}
            <div id="loginBox" class="userForm">
                <div>用户登录</div>
                <ul>
                    <li><span>用户名:</span><input class="form-control" type="text" name="username" /></li>
                    <li><span>密码:</span><input class="form-control" type="password" name="password" /></li>
                    <li><button type="button" class="btn btn-primary">登录</button></li>
                    <li>还没账号？<a href="javascript:void(0)" >立即注册</a></li>
                    <li id="loginInfo"></li>
                </ul>
            </div>

            <div id="registerBox" class="userForm" style="display: none">
                <div>新用户注册</div>
                <ul>
                    <li><span>用户名:</span><input class="form-control" type="text" name="username" /></li>
                    <li><span>密码:</span><input class="form-control" type="password" name="password" /></li>
                    <li><span>确认密码:</span><input class="form-control" type="password" name="repassword" /></li>
                    <li><button type="button" class="btn btn-primary">注册</button></li>
                    <li>已经注册？<a href="javascript:void(0)" >现在登录</a></li>
                    <li id="messageShow"></li>
                </ul>
            </div>

            {% endif %}
        </div>
    </div>
</div>
</body>
</html>